<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>仲裁列表</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
      #container{
        padding:0;
      }
      .arb_list{
        padding-top:0.1rem;
        background:#FFF;
      }
      .arb_list li{

      }
      .arb_list li a{
        padding:0.6rem 0.4rem;
        display: block;
        position:relative;
      }
      .arb_list li a:before{
        content:" ";
        position:absolute;
        bottom:0;
        right:0;
        width:calc(100% - 1rem - 0.6rem);
        height:1px;
        background:#F9F9F9;
      }
      .arb_list li a .icon{
        float:left;
        width:1rem;
        height:1rem;
        border-radius:50%;
      }
      .arb_list li a .info{
        float:left;
        width:calc(100% - 1rem);
        padding-left:0.35rem;
      }
      .arb_list li a .info h3{
        font-weight:normal;
        font-size:0.3rem;
        color:#595959;
        height:0.35rem;
        line-height:0.35rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .arb_list li a .info div{
        height:0.5rem;
        line-height:0.5rem;
        margin-top:0.3rem;
      }
      .arb_list li a .info .disflex{
        color:#999999;
        font-size:0.27rem;
        font-weight:300;
      }
      .arb_list li a .info .right{
        font-size:0.27rem;
        font-weight:300;
      }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container">
            <template v-if="list!=null">
                <template v-if="list.length>0">
                    <ul class="arb_list">
                        <li v-for="item in list" @click="$.openUrl('common/commonTitle','my/arbitrationDetail',{title:'仲裁详情', id: item.id});">
                            <a class="clearfix">
                                <img :src="item.icon" class="icon" />
                                <div class="info">
                                    <h3 class="ell">{{item.title}}</h3>
                                    <div class="disbox">
                                        <span class="disflex">{{item.report_time | dateFormate}}</span>
                                        <span class="right" :style="{color: renderStatusUI(item.status).color}">{{renderStatusUI(item.status).text}}</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="loadText">
                        <div class="weui-loadmore" v-if="hasMore">
                            <i class="weui-loading"></i>
                            <span class="weui-loadmore__tips">正在加载</span>
                        </div>
                        <span v-else class="over">我已经到底啦！</span>
                    </div>
                </template>
                <template v-else>
                    <div class="loadFull whiteBg">
                        <section class="m-no">
                            <div class="u-img"></div>
                            <div class="u-spec">暂无数据</div>
                        </section>
                    </div>
                </template>
            </template>
            <template v-else>
                <div class="loadFull whiteBg">
                    <div class="se-loading"></div>
                </div>
            </template>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
                    report: 0, // 0:接单人； 1: 派单人
                    status: '',
                    page: 1,
                    list:null,
                    hasMore: true,

                    iosTest:false,
                },
                filters: {
                    dateFormate: function(time){
                        return utils.tsToDateFormat(time, 'yyyy-MM-dd hh:mm');
                    },
                },
                methods:{
                    renderStatusUI: function(status){
                        var report = this.report;
                        var gray = 'rgb(160, 162, 160)';
                        var red = 'rgb(245, 13, 13)';
                        var green = '#49B447';
                        var blue = 'rgb(6, 78, 241)';
                        var yellow = 'rgb(245, 120, 13)';
                        var statusInfo = {
                            '0': {text: '待审核', color: gray},
                            '1': {text: report == 1 ? '胜诉' : '败诉', color: report == 1 ? green: red},
                            '2': {text: report == 1 ? '败诉' : '胜诉', color: report == 1 ? red : green},
                            '3': {text: '待复审', color: yellow},
                            '4': {text: '待复审', color: yellow},
                            '5': {text: '待复审', color: yellow},
                            '6': {text: '判平', color: blue},
                            '7': {text: '判平', color: blue},
                        };
                        return statusInfo[status];
                    },
                    getList: function(load){
                        var ajaxTag = 'arbitrationList';
                        api.cancelAjax({tag: ajaxTag});

                        var _this = this;
                        var report = this.report;
                        var status = this.status;
                        var page = this.page;
                        $.ajax({
                            url: '/task/arbitration/my_info?report='+report+'&status='+status+'&page='+page,
                            method: 'get',
                            load: load,
                            tag: ajaxTag,
                            success: function(res){
                                var list = res.data.result;
                                var hasMore = list.length >= res.data.pagesize;
                                if(page == 1 ){
                                    _this.list = list;
                                }else{
                                    _this.list = _this.list.concat(list);
                                }
                                _this.page += 1;
                                _this.hasMore = hasMore;
                            },
                        });
                    },
                },
                mounted(){
                    this.getList();
					$.initJs(this);
                }
            });

            $.pullDown({
                success:function(){
                    app.page = 1;
                    app.hasMore = true;
                    app.getList();
                }
            });

            //上拉加载
            api.addEventListener({
                name:'scrolltobottom',
                extra:{threshold:10}
            }, function(ret, err){
                app.getList();
            });
            
            api.addEventListener({
                name: 'arbitrationListChange'
            }, function(ret, err) {
                if(!ret){
                    return false;
                }
                app.report = ret.value.report;
                app.status = ret.value.status;
                app.page = 1;
                app.hasMore = true;
                app.list = null;
                app.getList();
            });

        }
    </script>
</body>
</html>
